import { Button, Card, Form, Input, message, Space, Table, Tooltip } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/lib/table'
import { useState, useEffect, Key } from 'react'
import {
  reqHospitalSets,
  reqDeleteHospitalSetItem,
  reqBatchDelHospitalSets,
} from '@api/hospital/hospitalSet'
import { useNavigate } from 'react-router-dom'
import {
  IhospitalSetItem,
  hospitalSetLsType,
} from '@api/hospital/model/hospitalSetTypes'
import Redirect from '@/components/Redirect'

export default function HospitalSet() {
  const [hospitalSetsLs, sethospitalSetsLs] = useState<hospitalSetLsType>([])
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(10)
  const [loading, setLoading] = useState(false)
  const [selectKeys, setSelectKeys] = useState<Key[]>([])
  useEffect(() => {
    getHospitalSets(page, pageSize)
  }, [])

  const [form] = Form.useForm()
  async function getHospitalSets(page: number, pageSize: number) {
    setLoading(true)
    const { hosname, hoscode } = form.getFieldsValue()
    const result = await reqHospitalSets({
      page: page,
      limit: pageSize,
      hosname,
      hoscode,
    })
    setLoading(false)
    sethospitalSetsLs(result.records)
    setTotal(result.total)
    setPage(page)
    setPageSize(pageSize)
  }

  const onFinish = (values: any) => {
    getHospitalSets(1, pageSize)
  }

  const clearForm = () => {
    form.resetFields()
    getHospitalSets(page, pageSize)
  }

  const navigate = useNavigate()

  const columns: ColumnsType<IhospitalSetItem> = [
    {
      title: '序号',
      render: (text, record, index) => index + 1,
      align: 'center',
      width: 70,
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人电话',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      render: (value, record) => {
        return (
          <Space>
            <Tooltip title="修改医院">
              <Button
                icon={<EditOutlined />}
                type="primary"
                onClick={() =>
                  navigate('/syt/hospital/hospitalSet/update/' + value.id)
                }
              ></Button>
            </Tooltip>
            <Tooltip title="删除医院">
              <Button
                onClick={async () => {
                  await reqDeleteHospitalSetItem(record.id)
                  message.success('删除成功')
                  getHospitalSets(page, pageSize)
                }}
                icon={<DeleteOutlined />}
                type="primary"
                danger
              ></Button>
            </Tooltip>
          </Space>
        )
      },
      fixed: 'right',
      width: 110,
      align: 'center',
    },
  ]

  function setBatchHospitalBtn(selectedRowKeys: Key[]) {
    setSelectKeys(selectedRowKeys)
  }

  async function batchHospitalSets() {
    await reqBatchDelHospitalSets(selectKeys)
    message.success('批量删除成功！')
    getHospitalSets(page, pageSize)
    setSelectKeys([])
  }

  return (
    <Card>
      <Space direction="vertical" size="large">
        <Form name="basic" onFinish={onFinish} layout="inline" form={form}>
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button onClick={clearForm}>清空</Button>
          </Form.Item>
        </Form>
        <Space>
          <Button
            type="primary"
            onClick={() => {
              navigate('/syt/hospital/hospitalSet/add')
            }}
          >
            添加
          </Button>
          <Button
            onClick={batchHospitalSets}
            disabled={!selectKeys.length}
            type="primary"
            danger
          >
            批量删除
          </Button>
        </Space>
      </Space>
      <Table
        rowKey="id"
        style={{ marginTop: 30 }}
        columns={columns}
        dataSource={hospitalSetsLs}
        scroll={{ x: 1300 }}
        bordered
        loading={loading}
        pagination={{
          current: page,
          pageSize,
          pageSizeOptions: ['2', '5', '10'],
          total,
          showQuickJumper: true,
          showSizeChanger: true,
          onChange: getHospitalSets,
          showTotal: (total) => `总共${total}`,
        }}
        rowSelection={{
          onChange: setBatchHospitalBtn,
        }}
      />
      ;
    </Card>
  )
}
